import React, { FC, useEffect, useState } from 'react'
import { Card, Image, Badge, Modal } from 'antd'
import { getarticeListDetails } from '@/api/article'
import { useLocation } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'
import { setlikes } from '@/api/like'
// import style from './index.module.scss'
// 分享海报
import { getqrcode } from '@/api/detail'
import QRCode from 'qrcode.react'
import DOMPurify from 'dompurify'
import { MenuOutlined } from '@ant-design/icons'
import Comments from '@/compents/comments/Comments'
import './index.scss'

const CardLeft: FC = () => {
  const dispatch = useDispatch()
  const location = useLocation()
  const id = location.pathname.split('/details/')[1]
  const content = useSelector((state: any) => state.reducer.detailsItem)

  const { t } = useTranslation()
  const [color, setColor] = useState('#ccc')
  const [color1, setColor1] = useState('#ccc')
  const [color2, setColor2] = useState('#ccc')
  useEffect(() => {
    getarticeListDetails(id)
      .then((res) => {
        dispatch({
          type: 'DETAILSITEM',
          payload: res.data.data
        })
      })
      .catch((err) => {
        console.log(err)
      })
    fun()
  }, [])

  const fn = (): void => {
    setColor('#ff0064')
  }
  const fnn = (): void => {
    setColor('#ccc')
  }
  const fn1 = (): void => {
    setColor1('#ff0064')
  }
  const fnn1 = (): void => {
    setColor1('#ccc')
  }
  const fn2 = (): void => {
    setColor2('#ff0064')
  }
  const fnn2 = (): void => {
    setColor2('#ccc')
  }

  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
  const setLike = (e: any) => {
    console.log(e)
    if (e.detail === 1) {
      void setlikes(id, { type: 'like' })
        .then((res) => {
          fn()
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    } else if (e.detail === 2) {
      fnn()
      void setlikes(id, { type: 'dislike' })
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }

  // 自定义方法 获取当前屏幕的宽度
  const fun = (): void => {
    // onresize 当前屏幕发生变化时 此方法会实时调用
    const card = window.document.querySelector('.card') as HTMLElement
    const ul = window.document.querySelector('.ul') as HTMLElement
    const head = window.document.querySelector('.head') as HTMLElement
    window.onresize = () => {
      if (document.documentElement.clientWidth < 750) {
        // 移动端
        card.className = 'card1'
        ul.className = 'ul1'
        head.style.display = 'block'
      } else {
        // pc端
        card.className = 'card'
        ul.className = 'ul'
        head.style.display = 'none'
      }
    }
  }
  fun()

  const [isModalOpen, setIsModalOpen] = useState(false)

  const showModal = (): void => {
    setIsModalOpen(true)
  }
  // 下载
  const handleOk = (): void => {
    setIsModalOpen(false)
    void getqrcode()
    console.log('下载')
    // if (ref.current === null) {
    //   return
    // }
    // toPng(ref.current, { cacheBust: true })
    //   .then((dataUrl) => {
    //     const link = document.createElement('a')
    //     link.download = 'img.png'
    //     link.href = dataUrl
    //     link.click()
    //   })
    //   .catch((err) => {
    //     console.log(err)
    //   })
  }

  const handleCancel = (): void => {
    setIsModalOpen(false)
  }

  return (
    <div>
      <Card className="card">
        <Image src={content.cover} />
        <div className="title">
          <h1>{content.title}</h1>
          <p>
            <i>
              {t('publish')}
              {content.publishAt}·{t('reading')}
              {content.views}
            </i>
          </p>
        </div>
        <div
          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content.html) }}
        ></div>
      </Card>
      <ul className="ul">
        <li>
          <Badge count={content.likes}>
            <svg
              onMouseMove={() => fn()}
              onMouseOut={() => fnn()}
              viewBox="0 0 1024 1024"
              version="1.1"
              width="24"
              height="24"
              onClick={(e) => {
                setLike(e)
              }}
            >
              <path
                d="M859.8 191.2c-80.8-84.2-212-84.2-292.8 0L512 248.2l-55-57.2c-81-84.2-212-84.2-292.8 0-91 94.6-91 248.2 0 342.8L512 896l347.8-362C950.8 439.4 950.8 285.8 859.8 191.2z"
                fill={color}
              ></path>
            </svg>
          </Badge>
        </li>
        <li>
          <svg
            onMouseMove={() => fn1()}
            onMouseOut={() => fnn1()}
            viewBox="0 0 1024 1024"
            version="1.1"
            width="24"
            height="24"
          >
            <path
              d="M988.8 512a348.8 348.8 0 0 1-144.96 278.72v208.32l-187.84-131.52a387.2 387.2 0 0 1-56 4.8A408.64 408.64 0 0 1 384 811.84l-36.8-23.04a493.76 493.76 0 0 0 52.8 3.2 493.44 493.44 0 0 0 51.2-2.88c221.44-23.04 394.24-192 394.24-400a365.12 365.12 0 0 0-4.16-51.84 373.44 373.44 0 0 0-48.96-138.56l18.88 11.2A353.6 353.6 0 0 1 988.8 512z m-198.72-128c0-192-169.6-349.76-378.24-349.76h-24C192 47.04 33.92 198.72 33.92 384a334.08 334.08 0 0 0 118.4 253.12v187.52l86.08-60.48 66.24-46.4a396.16 396.16 0 0 0 107.52 16C620.48 734.08 790.08 576 790.08 384z"
              fill={color1}
            ></path>
          </svg>
        </li>
        <li>
          <svg
            onMouseMove={() => fn2()}
            onMouseOut={() => fnn2()}
            onClick={showModal}
            viewBox="0 0 1024 1024"
            version="1.1"
            width="24"
            height="24"
          >
            <path
              d="M753.607 584.7c-48.519 0-91.596 23.298-118.66 59.315l-233.123-116.96c3.684-12.936 5.657-26.591 5.657-40.71 0-15.465-2.369-30.374-6.76-44.391l232.241-116.52c26.916 37.549 70.919 62.017 120.644 62.017 81.926 0 148.34-66.412 148.34-148.34 0-81.926-66.413-148.34-148.34-148.34-81.927 0-148.34 66.413-148.34 148.34 0 5.668 0.33 11.258 0.948 16.762l-244.945 122.892c-26.598-25.259-62.553-40.762-102.129-40.762-81.926 0-148.34 66.412-148.34 148.34s66.413 148.34 148.34 148.34c41.018 0 78.144-16.648 104.997-43.555l242.509 121.668c-0.904 6.621-1.382 13.374-1.382 20.242 0 81.927 66.412 148.34 148.34 148.34s148.34-66.413 148.34-148.34c-0.001-81.925-66.409-148.339-148.336-148.339l0 0z"
              fill={color2}
            ></path>
          </svg>
        </li>
      </ul>
      <Comments />
      <div className="head">
        <div className="img2">
          <img
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            alt=""
          />
          <MenuOutlined
            style={{
              fontSize: '36px',
              color: 'red'
            }}
          />
        </div>
      </div>
      <Modal
        title="分享海报"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width={400}
        okText={'下载'}
        cancelText={'关闭'}
      >
        <Image src={location.state.cover} />

        <b style={{ fontSize: '16px' }}>{location.state.title}</b>
        <br />
        <p>
          <QRCode
            id="qrCode"
            value={'http://192.168.1.107:3000/details/' + id}
            size={80} // 二维码的大小
            fgColor="#000000" // 二维码的颜色
            style={{ margin: 'auto' }}
          />
        </p>
      </Modal>
    </div>
  )
}

export default CardLeft
